<template>
  <div class="fd layouts">
    <div class="hidden-md-and-down layouts-left" v-if="!navIsTo">
      <LltMenu :isCollapse="isCollapse" />
    </div>
    <div class="layouts-right">
      <LltHeader @handleCollapse="handleCollapse" :isCollapse="isCollapse" />

      <div class="llt-layouts-body">
        <router-view v-slot="{ Component }" :key="key">
          <template v-if="Component">
            <transition name="list" v-if="!refresh">
              <keep-alive :include="cachedViews">
                <component :is="Component"></component>
              </keep-alive>
            </transition>
          </template>
        </router-view>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  shallowRef,
  reactive,
  getCurrentInstance,
  onMounted,
  toRef,
  toRefs,
  onBeforeMount,
  watch,
  computed,
  onUpdated,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import LltMenu from "/@/layouts/components/menu.vue";
import LltHeader from "/@/layouts/components/header.vue";
import { useIndexStore } from "/@ts/store";
const store = useIndexStore();
const navIsTo = computed(() => store.getNavIsTo);
const refresh = computed(() => store.getRefresh);
const router = useRouter();
const route = useRoute();
onMounted(() => {
});

const cachedViews = computed(() => {
  return store.getTagPages
    .filter((res: any) => res.meta && !res.meta.noCache)
    .map((res: any) => res.name);
});

const key = computed(() => {
  return route.path;
});


var isCollapse = shallowRef(false);
const state = reactive({
  data: { a: 1 },
});
const handleCollapse = (e: boolean) => {
  isCollapse.value = !e;
};
</script>

<style scoped lang="scss">
.layouts {
  width: 100vw;
  height: 100vh;
  position: relative;
  top: 0;
  left: 0;
}
.layouts-right {
  flex: 1;
  height: 100%;
  // background-color: #f0f2f5;
}
.layouts-left {
  // flex-basis: 200px;
  overflow-y: hidden;
  overflow-x: hidden;
  max-width: 220px;
  flex-shrink: 0;
}
.llt-layouts-body {
  height: 100px;
  min-height: calc(100% - 114px);
  max-height: calc(100% - 114px);
  overflow: hidden;
  background-color: var(--bodyBg)
}
// 路由切换动画
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>
